<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		省份：<select name="" id="pro" onchange="prionchage()">
			<option value="-1">请选择省份</option>
		</select>
		城市：<select name="" id="city" onchange="cityarrchange()">
			<option value="-1">请选择城市</option>
		</select>
		<br />
		你选择了：<label for="" id="ok"></label>
	</body>
	<script type="text/javascript">
		var priarr=['北京市','福建省','广东省','浙江省','云南省'];
		var cityarr=[
			['北京市','朝阳区'],
			['福州市','泉州市','漳州市','龙岩市'],
			['深圳市','珠海市','广州市'],
			['杭州市','宁波市'],
			['昆明市','保山市']
		];
		onload=function(){
			for(var i=0;i<priarr.length;i++){
				document.getElementById('pro').innerHTML+=`<option value="`+i+`">`+priarr[i]+`</option>`;
			};
		};
		var id=document.getElementById('pro');
		var idd=document.getElementById('city');
		function prionchage(){
			document.getElementById('city').innerHTML=`<option value="-1">请选择城市</option>`;
			for(var i=0;i<cityarr[id.value].length;i++){
				document.getElementById('city').innerHTML+=`<option value="`+i+`">`+cityarr[id.value][i]+`</option>`;
			}
		}
		function cityarrchange(){
			var id=document.getElementById('pro');
			var idd=document.getElementById('city');
			document.getElementById('ok').innerText=id.options[id.selectedIndex].text+
			'-'+idd.options[idd.selectedIndex].text
		}
	</script>
</html>
